import React from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getNewSongs, INewSong } from "../store/actions/newsongs.action";
import {
  getRecommendList,
  IRecommendItem,
} from "../store/actions/recommend.action";
import { AppStore } from "../store/reducers";
import Category from "../components/core/Category/Category";
import RecommendItem from "../components/core/RecommendItem/RecommendItem";
import SongsListItem from "../components/core/SongsListItem/SongsListItem";

const Home = () => {
  const dispatch = useDispatch();

  const recommendList = useSelector<AppStore, IRecommendItem[]>((state) => {
    return state.recommendList;
  });
  const newSongsList = useSelector<AppStore, INewSong[]>(
    (state) => state.newSongsList
  );

  const getList = () => {
    dispatch(getRecommendList(6));
    dispatch(getNewSongs());
  };

  useEffect(() => {
    getList();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div>
      <Category>编辑推荐</Category>
      <div
        style={{
          marginBottom: 16,
          overflow: "hidden",
          display: "flex",
          flexWrap: "wrap",
        }}
      >
        {recommendList.map((item: IRecommendItem, index: number) => (
          <RecommendItem item={item} key={"recommend-item" + index} />
        ))}
      </div>
      <div></div>
      <Category>最新音乐</Category>
      <div></div>
      {newSongsList.map((item: INewSong, index: number) => (
        <SongsListItem item={item} key={"newsong-" + index} />
      ))}
      {/* <SongsListItem />
      <SongsListItem />
      <SongsListItem />
      <SongsListItem />
      <SongsListItem /> */}
      <div style={{ marginBottom: 30 }}></div>
    </div>
  );
};

export default Home;
